<!DOCTYPE html>
<html>
<head>
    <script src="../HtmlRunning/build/react.js"></script>
    <script src="../HtmlRunning/build/react-dom.js"></script>
    <script src="../HtmlRunning/build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
    function BoilingVerdict(props) {
        if (props.celsius >= 100) {
            return <p>The water would boil.</p>;
        }
        return <p>The water would not boil.</p>;
    }

    class Calculator extends React.Component {
        constructor(props) {
            super(props);
            this.handleChange = this.handleChange.bind(this);
            this.state = {temperature: ''};
        }

        handleChange(e) {
            this.setState({temperature: e.target.value});
        }

        render() {
            const temperature = this.state.temperature;
            return (
                    <fieldset>
                        <legend>Enter temperature in Celsius:</legend>
                        <input
                                value={temperature}
                                onChange={this.handleChange} />
                        <BoilingVerdict
                                celsius={parseFloat(temperature)} />
                    </fieldset>
            );
        }
    }

    ReactDOM.render(<Calculator />, document.getElementById("example"));

</script>
</body>
</html>

